<template>
  <el-dialog class="ba-operate-dialog" :close-on-click-modal="false" :model-value="baTable.form.operate ? true : false" @close="handleClose">
    <template #header>
        <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">
            {{ baTable.form.operate ? t(baTable.form.operate) : '' }}
        </div>
    </template>
    <el-scrollbar v-loading="baTable.form.loading" class="ba-table-form-scrollbar">
        <el-tabs v-model="state.activeName" class="demo-tabs" :before-leave="handleTabClick">
            <el-tab-pane label="业务详情" name="a">
                <popupForm ref="basicFormRef" />
            </el-tab-pane>
            <el-tab-pane label="做箱计划" name="b">
              <conloadplan v-if="state.activeName == 'b'"/>
            </el-tab-pane>
            <el-tab-pane label="费用" name="c">
              <bill v-if="state.activeName == 'c'"/>
            </el-tab-pane>
        </el-tabs>
    </el-scrollbar>
    <template #footer v-if="state.activeName=='a'&&baTable.form.operate !=='view'">
        <div :style="'width: calc(100% - ' + baTable.form.labelWidth! / 1.8 + 'px)'">
            <el-button @click="baTable.toggleForm('')">{{ t('Cancel') }}</el-button>
            <el-button v-blur :loading="baTable.form.submitLoading" @click="handleSave" type="primary">
                {{ baTable.form.operateIds && baTable.form.operateIds.length > 1 ? t('Save and edit next item') : t('Save') }}
            </el-button>
        </div>
    </template>
  </el-dialog>
</template>


<script setup lang="ts">
import { reactive, ref, inject, onMounted, computed ,provide,watch, watchEffect} from 'vue'
import { useI18n } from 'vue-i18n'
import type baTableClass from '/@/utils/baTable'
import {  ElMessage } from 'element-plus'
import popupForm from './popupForm.vue';
import conloadplan from '../conloadplan/index.vue'
import bill from '../bill/index.vue'

const baTable = inject('baTable') as baTableClass

const state = reactive({
  activeName:'a',
  tabLock:false,
})
const TZID = computed(()=>{
  return baTable.form.items!.TZID ||''
})
const corp = computed(()=>{
  return baTable.form.items!.SENDER
})
provide('TZID',TZID)
provide('corp',corp)

const mainOperate = computed(()=>{
  return baTable.form.operate
})
provide('mainOperate',mainOperate)

watchEffect(()=>{

  if(baTable.form.operate == 'add'){
    state.activeName = 'a'
    state.tabLock = true
  }
  if(baTable.form.operate == 'edit'){
    state.activeName = 'a'
    state.tabLock = false
  }
})


const basicFormRef = ref()
const handleSave = ()=>{
  basicFormRef.value.doSave((res:any)=>{
    console.log(res)
    state.tabLock = false
    baTable.form.items!.TZID = res.data.id
  })
}


//判断条件最后要调整
const handleTabClick=()=>{
  console.log('lock',state.tabLock)
  // return true
  if(state.tabLock){
      ElMessage({
          message:'请先保存表单',
          type:'warning'
      })
      return false
  }else{
      return true
  }
}

const handleClose = ()=>{
  baTable.toggleForm()
  state.activeName = 'a'
}




const { t } = useI18n()
</script>